<template>
  <div class="detail">
    <mt-header title="详情页">
      <router-link to="/" slot="left">
        <mt-button icon="back" ></mt-button>
      </router-link>
    </mt-header>
    <div>
      <img :src="list.avaUrl" class="img">
      <div>
        <p class="p1">姓名：<span class="sp1">{{list.name}}</span></p>
        <p class="p1">电话：<span class="sp1">{{list.phone}}</span></p>
        <p class="p1">年龄：<span class="sp1">{{list.age}}</span></p>
        <p class="p1">简介：<span class="sp1">{{list.detail}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import url from '../tools/url'
export default {
  name: "Detail",
  data() {
    return {
      list:{}
    };
  },
  computed: {
    
  },
  mounted() {
    var id = this.$route.query.v;
    var token = sessionStorage.getItem("token");
    var str = `token=${token}&id=${id}`;
    this.axios.post("api3"+url.DETAIL,str).then(res=>{
      if (res.data.code == 200) {
        this.list = res.data.data;
      }else{
        Toast("该用户暂无详情！");
        this.$router.push("/")
      }

    })
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fanhui {
  float: left;
}
.img{
  width: 100%;
}
.sp1{
  color:darkturquoise;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.p1{
  color: chocolate;
}
</style>
